<template>
    <div>
        <!-- 大banner -->
        <div class='d1'>
        <img src='../assets/product.img/porridge/cp_banner.jpg'>
        </div>
    
        <!-- 导航栏 -->
        <div class='d2'>
 <van-tabs v-model="active" >
    <!-- 粥品 -->
    <van-tab title="营养粥品">

        <div class='product'>
            <div class='d3'>
当前位置：<router-link to='' active-class='active'>夏达粥铺></router-link>
<router-link to='' active-class='active'>粥品展示></router-link>
<router-link to='' class='router-link-active'>营养粥品></router-link>
</div>
        <span>粥品展示/营养粥品</span>
<div class='pic'>
<img src='../assets/product.img/porridge/zhou15.jpg'>

</div>
<div class='wenzi'>
<div>黑豆糯米粥</div>
<a href='Porridges'>查看详情>>> </a>

</div>
</div>
         </van-tab>
<!-- 小菜 -->
  <van-tab title="配粥小菜" >
      <div class='product'>
           <div class='d3'>
当前位置：<router-link to='' active-class='active'>夏达粥铺></router-link>
<router-link to='' active-class='active'>粥品展示></router-link>
<router-link to='' class='router-link-active'>配粥小菜></router-link>
</div>
<span>粥品展示/配粥小菜</span>
 <div class='pic'>
<img src='../assets/product.img/side dish/1.jpg'>
</div>
<div class='wenzi'>
<div>凉拌豆丝</div>

<a href='#'>查看详情>>> </a>

</div>
</div>

  </van-tab>

  <!-- 点心 -->
  <van-tab title="配粥点心">
      <div class='product'>
           <div class='d3'>
当前位置：<router-link to='' active-class='active'>夏达粥铺></router-link>
<router-link to='/' active-class='active'>粥品展示></router-link>
<router-link to='' class='router-link-active'>配粥点心></router-link>
</div>
         
          <span>粥品展示/配粥点心</span>
    
 <div class='pic'>
<img src='../assets/product.img/dessert/1.jpg'>
</div>
<div class='wenzi'>
<div>红豆糯米糍</div>
<a href='#'>查看详情>>> </a>

</div>
</div>

  </van-tab>

  <!-- 蒸品 -->
  <van-tab title="配粥蒸品" >
      <div class='product'>
           <div class='d3'>
当前位置：<router-link to='' active-class='active'>夏达粥铺></router-link>
<router-link to='Porridge' active-class='active'>粥品展示></router-link>
<router-link to='' class='router-link-active'>配粥蒸品></router-link>
</div>
          <span>粥品展示/配粥蒸品</span>
<div class='pic'>
<img src='../assets/product.img/steam product/1.jpg'>
</div>
<div class='wenzi'>
<div>紫米莲子盅</div>
<a href='#'>查看详情>>> </a>

</div>
</div>

  </van-tab>
  

</van-tabs>
</div>

    </div>
</template>
<script>


export default ({
    data(){
        return{
            active:0,
            
        
        }
    }
})
</script>
<style scoped>
img{
    width: 100%;
    height: 140px;
}
.d2{
   margin: 0px 40px;

}
.d3{
    color:#666666;
    font-size:13px;
 margin: 10px auto;

}
.d3 a{
    color:#666666;
}
.d3 .active{
    color:#666666;

}
.d3 .router-link-active{
    color:#FC532F;
}
.product{
    margin: 20px auto;
    
}

.product span{
    color: #818181;
    font-size: 30px;
    display: inline-block;
    /* margin-left: 50px; */
     margin: 10px auto;

    
}
.product .pic img{
    width: 240px;
    height: 160px;
    display: inline-block;
    /* margin-left:  50px;
    margin-top: 20px;
     */
      margin: 10px auto;

}
.product .wenzi >div{
    font-size: 15px;
}
.product .wenzi a{
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    width: 90px;
    height: 35px;
    background-color:darkgrey;
    line-height: 35px;
    text-align: center;
    color:#666666;

}
.product .wenzi a:hover{
    color: brown;
}
.product .wenzi{
    display: flex;
    justify-content: space-between;
    margin-top:20px;
    padding-bottom: 20px;
    border-bottom:1px solid #818181 ;
    line-height: 35px;
    
}


</style>
